<template>
  <common-card class="knowledge-point">
    <template #title
      >共性错题
      <span ref="tooltipRef" class="tooltip-wrapper">
        <a-tooltip placement="bottom" :getPopupContainer="() => tooltipRef">
          <template #title>
            <div class="overlay-content">
              <span>题目提交率高于40%，且正确率低于80%的错题</span>
            </div>
          </template>
          <label class="explain-icon"></label>
        </a-tooltip> </span
    ></template>
    <!-- <template #operate
      ><span class="operate" @click="goWrong"
        ><span class="operate__desc">巩固错题</span
        ><label class="operate__icon"></label></span
    ></template> -->
    <div>
      <p class="tip">
        所选时间内，该{{
          props.activeTab === 'grade' ? '年级' : '班级'
        }}共性错题{{ getTotal }}道，平均正确率{{
          getPercent(getAvgRate)
        }}%。其中【{{ getMinSection || '-' }}】的正确率最低
      </p>
      <div class="table">
        <a-table
          :showSorterTooltip="false"
          :columns="COMMON_MISTAKES_COLUMN"
          :dataSource="dataList"
          :pagination="false"
          :scroll="{ y: 300 }"
        >
          <template v-slot:bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'mean_score_right'">
              {{ getPercent(record.mean_score_right) }}%</template
            >
          </template>
        </a-table>
      </div>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { COMMON_MISTAKES_COLUMN } from '../constant'
import { getCommonMistakes } from '@/apis/situation-report/index'
import { useSituationReport } from '@/stores/situation-report'
import { getPercent } from '../utils'
import { useRouter } from 'vue-router'
import { ref, watchEffect, computed } from 'vue'
const router = useRouter()
const props = defineProps({
  activeTab: {
    default: 'grade',
    type: String
  }
})

const situationReport = useSituationReport()
const tooltipRef = ref(null)
const dataList = ref([])

const getMinSection = computed(() => {
  if (dataList.value.length > 0) {
    let minIndex = 0
    for (let index = 0; index < dataList.value.length; index++) {
      if (
        dataList.value[minIndex].mean_score_right >
        dataList.value[index].mean_score_right
      )
        minIndex = index
    }
    return dataList.value[minIndex].section_name
  }
  return ''
})

const getTotal = computed(() => {
  let total = 0
  for (let index = 0; index < dataList.value.length; index++) {
    const element = dataList.value[index]
    total += element.wrong_count
  }
  return total
})

const getData = async () => {
  const params = JSON.parse(JSON.stringify(situationReport.search))
  if (props.activeTab === 'grade') {
    delete params.class_id
  }
  const { data } = await getCommonMistakes(params)
  dataList.value = data?.list || []
}

const getAvgRate = computed(() => {
  let rate = 0
  for (let index = 0; index < dataList.value.length; index++) {
    const element = dataList.value[index]
    rate += element.mean_score_right
  }
  return getTotal.value > 0 ? rate / getTotal.value : 0
})

const goWrong = () => {
  router.push({
    path: '/wrongBook',
    query: {
      source: 'situationReport',
      resourceType: '5',
      resourceTab: '0'
    }
  })
}

watchEffect(async () => {
  if (
    situationReport.search.class_id ||
    situationReport.search.grade_id ||
    situationReport.search.subject_id
  ) {
    getData()
  }
})
</script>
<style lang="less" scoped>
@import '../style.less';

.knowledge-point {
  .tip {
    padding: 24px 12px;
    border-radius: 16px;
    background: #f6f8fe;
  }

  .table {
    margin-top: @gap;
  }

  .operate {
    &__icon {
      margin-left: 4px;
      background: url('@/assets/images/situation-report/right-arrow.png')
        no-repeat center/cover;
    }
  }
}
</style>
